<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人中心 充值</title>
    <link rel="stylesheet" href="../css/public.css">
    <link rel="stylesheet" href="../css/menber.css">
    <script src="../js/jquery-1.10.1.min.js"></script>
    <script src="//cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
</head>
<body>
<script>
    function openewm(){
        var czzh = $('.pay_zh_input').val(),
            zfzh = $('.pay_name_input').val(),
            bz = $('.pay_bz_input').val();
            $('.erweima_zf').show();
            $('.erweima_zf p').eq(0).find('span').html(czzh);
            $('.erweima_zf p').eq(1).find('span').html(zfzh);
            $('.erweima_zf p').eq(2).find('span').html(bz);
    }
</script>
<header>
    <div class="top">
        <div class="container">
            <!--未登录状态-->
            <div class="login" style="display: none">
                <div class="top-reg">
                    <div class="denglu fl">
                        <a href="javascript:;"><span><img src="../images/icon_wdzh.png" alt="">登陆</span></a>
                    </div>
                    <div class="fl line"></div>
                    <div class="zhuce fl">
                        <a href="javascript:;"><span><img src="../images/icon_yhgl.png" alt="">注册</span></a>
                    </div>
                    <div class="clearfix"></div>
                </div>
                <div class="top-tips">
                    <span>游客，您好！</span>
                    您是第666位访问网站的人
                </div>
            </div>
            <!-- 登陆状态 -->
            <div class="login success">
                <div class="top-reg">
                    <div class="qiandao fl">
                        <a href="javascript:;"><span><img src="../images/icon_rl.png" alt="">签到</span></a>
                    </div>
                    <div class="fl line"></div>
                    <div class="tongzhi fl">
                        <a href="message.html"><span><img src="../images/icon_tz.png" alt="">通知</span></a>
                    </div>
                    <div class="fl line"></div>
                    <div class="tongzhi fl">
                        <a href="menber.html"><span><img src="../images/icon_grzx.png" alt="">个人中心</span></a>
                    </div>
                    <div class="fl line"></div>
                    <div class="tongzhi fl">
                        <a href="javascript:;" class='loginout'><span><img src="../images/icon_aqtc.png" alt="">安全退出</span></a>
                    </div>
                    <div class="clearfix"></div>
                </div>
                <div class="top-tips">
                    <span>xxx，您好！</span>
                    当前在线人数666人
                </div>
            </div>
        </div>
    </div>
</header>
<!--logo-->
<div class="logo">
    <div class="container">
        <div class="logoimg fl">
            <a href="../index.html"><img src="../images/icon_logo.png" alt=""></a>
        </div>
        <div class="logoright fr">
            <li class="on"><a href="../index.html">首页</a></li>
            <li><a href="javascript:;" class="addroom">创建房间</a></li>
            <li><a href="javascript:;"><img src="../images/icon_nav.png" alt=""></a></li>
            <div class="search-box fl">
                <input type="text" class="search" placeholder="请输入房间ID">
                <img src="../images/icon_search.png" alt="">
                <div class="result_box">

                </div>
            </div>
        </div>
    </div>
</div>
<!--个人中心-->
<div class="container recharge">
    <div class="recharge-title">
        <img src="../images/icon_cz.png" alt="">充值
    </div>
    <div class="recharge-title-way">
        <p>请选择充值方式</p>
    </div>
    <div class="clearfix"></div>
    <div class="pay-box">
        <a href="javascript:;" class="on" onclick="getewm(0)"><img src="../images/icon_wxpay.png" alt="">微信支付</a>
        <a href="javascript:;" onclick="getewm(1)"><img src="../images/icon_zfbpay.png" alt="">支付宝支付</a>
    </div>
    <div class="recharge-from">
        <div class="recharge-group">
            <div class="recharge-tit">当前支付方式：</div>
            <div class="recharge-right"><span class="zf_way_txt">微信支付</span></div>
        </div>
        <div class="recharge-group">
            <div class="recharge-tit">二维码：</div>
            <div class="recharge-right erweima"><img src="" alt="" width="260"></div>
        </div>
        <div class="recharge-ewmbox">

        </div>
        <div class="recharge-group">
            <div class="recharge-tit">售价：</div>
            <div class="recharge-right money-num">
                <a href="javascirpt:;" data-money="100"><img src="../images/icon_yexs.png" alt=""> 100亿信币
                    <p>售价10元</p>
                </a>
                <a href="javascirpt:;" data-money="100"><img src="../images/icon_yexs.png" alt=""> 200亿信币
                    <p>售价20元</p>
                </a>
                <a href="javascirpt:;"  data-money="100"><img src="../images/icon_yexs.png" alt=""> 300亿信币
                    <p>售价30元</p>
                </a>
                <a href="javascirpt:;" data-money="100"><img src="../images/icon_yexs.png" alt=""> 400亿信币
                    <p>售价40元</p>
                </a>
            </div>
        </div>

        <div class="recharge-group">
            <div class="recharge-tit">充值账号：</div>
            <div class="recharge-right"><input type="text" class="pay_zh_input"></div>
        </div>

        <div class="recharge-group">
            <div class="recharge-tit">充值金额：</div>
            <div class="recharge-right"><input type="number" class="pay_name_input"></div>
        </div>
        <div class="recharge-group">
            <div class="recharge-tit">备注：</div>
            <div class="recharge-right"><input type="text" class="pay_bz_input"></div>
        </div>
        <div class="recharge-group">
            <div class="recharge-tit">提示：</div>
            <div class="recharge-right">为了确保充值及时到账，支付完成后请点击“确认充值”按钮</div>
        </div>
        <a href="javascript:;" class="recharge" onclick="openewm()">确定充值</a>
    </div>
</div>
<!--个人中心end-->
<!--footer-->
<footer>
    <div class="container">
        <div class="footer-list">
            <div class="footer-tit">
                联系我们
            </div>
            <ul>
                <li><a href="tencent://message/?uin=88888888&Site=&menu=yes">商务QQ:11111111</a></li>
                <li>技术咨询:11111111</li>
                <li>联系电话:11111111</li>
            </ul>
        </div>
        <div class="footer-list">
            <div class="footer-tit">
                常见问题
            </div>
            <ul>
                <li><a href="javascript:;">账号问题</a></li>
                <li><a href="javascript:;">常见问题</a></li>
                <li><a href="javascript:;">新手入门</a></li>
            </ul>
        </div>
        <div class="footer-list">
            <div class="footer-tit">
                关于我们
            </div>
            <ul>
                <li><a href="javascript:;">公司介绍</a></li>
                <li><a href="javascript:;">隐私政策</a></li>
                <li><a href="javascript:;">免责声明</a></li>
            </ul>
        </div>
        <div class="footer-list">
            <div class="footer-tit">
                友情链接
            </div>
            <ul>
                <li><a href="javascript:;">xxxx网</a></li>
                <li><a href="javascript:;">xxxx网</a></li>
                <li><a href="javascript:;">xxxx网</a></li>
            </ul>
        </div>
        <div class="footer-list">
            <img src="../images/icon_logo1.png" alt="">
        </div>
        <div class="clearfix"></div>
    </div>
</footer>
<div class="copyright">
    <div class="container">
        <div class="fr">川ICP备案号xxxxx号</div>
        <div class="cpr">Copyright ©聊天室网 2014-2018.All rights reseved</div>
    </div>
</div>

<div class="warning erweima_zf">
    <div class="zf_box">
        <div class="zf_ewm">
            <p>当前充值账号：<span></span></p>
            <p>充值金额：<span></span></p>
            <p>备注:  <span></span></p>
        </div>
        <div class="zf_box_zh">
            <a href="javascript:;" class="chongzhi-btn" onclick="sendcz()">确认</a>
            <a href="javascript:;" class="close" onclick="$('.erweima_zf').hide();">取消</a>
        </div>
    </div>
</div>

<script>
    function sendcz(){
        var czzh = $('.pay_zh_input').val(),
            zfzh = $('.pay_name_input').val(),
            bz = $('.pay_bz_input').val();
        $.ajax({
            url:'http://shishi2017.com/api/recharge/offline_charge',
            dataType:'JSON',
            type:'POST',
            data:{
                uid:$.cookie('user_id'),
                token:$.cookie('user_token'),
                money:$('.pay_name_input').val(),
                name:czzh,
                remark:bz,
                way:($('.pay-box a.on').index()+1),
            },success:(function(esa){
                alert(esa.msg);
                $('.erweima_zf').hide();
            })
        })
    };
    function getewm(num){
        $.ajax({
            url:'http://shishi2017.com/api/recharge/get_offline_qrcode',
            type:'POST',
            datatype:'json',
            data:{
                uid:$.cookie('user_id'),
                token:$.cookie('user_token')
            },success:(function(es){
                var es=JSON.parse(es);
                var ewm = es.data[num].qrcode;
                $('.erweima img').attr('src',ewm);
                console.log(es);
            })
        });
    };
    getewm(0);
(function(){
    var ways=0,
        money_num=100,
        pay_zh,
        pay_bz,
        pay_name,
        pay_sj=/^[1][3,4,5,7,8][0-9]{9}$/;
    //支付方式
    $('.pay-box a').click(function(){
         way = $(this).index();
        $(this).addClass('on').siblings().removeClass('on');
        $('.zf_way_txt').html($(this).text());
    });

})();
</script>

<script src="../js/common.js"></script>
<script src="../js/menber.js"></script>
<script src="../js/distpicker.data.js"></script>
<script src="../js/distpicker.js"></script>
<script src="../js/main.js"></script>
</body>
</html>